<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ul {
        display: flex;
        justify-content: space-evenly;
        margin: 0;
        padding: 0;
        margin: 100px auto;
        flex-wrap: wrap;

    }

    ul li {
        list-style: none;
        width: 300px;
        /* min-width: 20%; */
        border: 1px solid #ccc;
        padding: 30px;
        box-shadow: 0px 0px 5px 0px #000;
        margin-bottom: 20px;

    }

    ul>li img {
        width: 200px;
        margin-left: 20px;
    }
</style>

<body>
    <h2>根据数据生成一个商品列表</h2>
    <button id="btn1">根据价格排序</button>
    <button id="btn2">根据销量排序</button>
    <button id="btn3">根据评价排序</button>
    <!-- 实现商品列表（根据价格，销量，评价排序） -->
    <ul id="list">

    </ul>
    <script>

        var wares = [
            {
                id: '001',
                name: 'iphone7 plugs',
                imgurl: 'img/ip7.jpg',
                price: 5899.00,
                sale: 5888.00,
                color: '土豪金',
                evaluate: 288,
                sales: 1230
            },
            {
                id: '002',
                name: 'Note7',
                imgurl: 'img/note7.jpg',
                price: 3899.00,
                sale: 998.00,
                color: '黑色',
                evaluate: 289,
                sales: 439
            },
            {
                id: '003',
                name: '荣耀7',
                imgurl: 'img/honor7.jpg',
                price: 1999.00,
                sale: 1899.00,
                color: '白色',
                evaluate: 438,
                sales: 908
            },
            {
                id: '004',
                name: 'iphone7 plugs',
                imgurl: 'img/ip7.jpg',
                price: 5999.00,
                sale: 5808.00,
                color: '土豪金',
                evaluate: 223,
                sales: 986
            },
            {
                id: '005',
                name: 'Note7',
                imgurl: 'img/note7.jpg',
                price: 3892.00,
                sale: 998.00,
                color: '黑色',
                evaluate: 88,
                sales: 8798
            },
            {
                id: '006',
                name: '荣耀7',
                imgurl: 'img/honor7.jpg',
                price: 1929.00,
                sale: 1099.00,
                color: '白色',
                evaluate: 2088,
                sales: 453
            },
            {
                id: '007',
                name: 'iphone7 plugs',
                imgurl: 'img/ip7.jpg',
                price: 4899.00,
                sale: 2888.00,
                color: '土豪金',
                evaluate: 2880,
                sales: 88
            },
            {
                id: '008',
                name: 'Note7',
                imgurl: 'img/note7.jpg',
                price: 5876.00,
                sale: 998.00,
                color: '黑色',
                evaluate: 3288,
                sales: 99
            },
            {
                id: '009',
                name: '荣耀7',
                imgurl: 'img/honor7.jpg',
                price: 4999.00,
                sale: 1899.00,
                color: '白色',
                evaluate: 1288,
                sales: 645
            },
            {
                id: '010',
                name: 'iphone7 plugs',
                imgurl: 'img/ip7.jpg',
                price: 5888.00,
                sale: 2899.00,
                color: '土豪金',
                evaluate: 2288,
                sales: 34
            },
            {
                id: '011',
                name: 'Note7',
                imgurl: 'img/note7.jpg',
                price: 3299.00,
                sale: 978.00,
                color: '黑色',
                evaluate: 28,
                sales: 1213
            },
            {
                id: '012',
                name: '荣耀7',
                imgurl: 'img/honor7.jpg',
                price: 1976.00,
                sale: 1899.00,
                color: '白色',
                evaluate: 3243,
                sales: 123
            }
        ]
        
            btn1.onclick=function(){
                list.innerHTML=''
                wares.sort(function(a, b) {
                    return a.sale - b.sale
                })
               data()
            }
            btn2.onclick=function(){
                list.innerHTML=''
                wares.sort(function(a, b) {
                    return b.evaluate - a.evaluate
                })
                data()
            }
            btn3.onclick=function(){
                list.innerHTML=''
                wares.sort(function(a, b) {
                    return b.sales - a.sales
                })
                data()
            }
        function data(data){
            for (var i = 0; i < wares.length; i++) {
                list.innerHTML += '<li>' +
                    '<img src="' + wares[i].imgurl + '">' +
                    ' <h2>' + wares[i].name + '</h2>' +
                    ' <p>编号：' + wares[i].id + '</p>' +
                    '<p>颜色：' + wares[i].color + '</p>' +
                    ' <p>原价：' + wares[i].price + '</p>' +
                    '<p>现价：' + wares[i].sale + '</p>' +
                    '<p>销量：' + wares[i].evaluate + '</p>' +
                    '<p>评价：' + wares[i].sales + '</p>' +
                    '</li>';
                    // wares.sort(function(a, b) {
                    // return b.data - a.data
                // })
               
            }
        }
        data()
    </script>
</body>

</html>